<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Management | MI Tagger</title>
    <link rel="shortcut icon" href="/static/img/favicon.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin.css" />
    <!-- Java Script -->
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="header">
        <div id="logo">
        <a href="/home/dashboard">
            <span style="color: #2aabe2">M</span><span style="color: #ed1b24">I</span>
            <span style="color: #3ab54b">T</span><span style="color: #f6931b">a</span><!--
         --><span style="color: #0072bb">g</span><span style="color: #0171b9">g</span><!--
         --><span style="color: #ed1e79">e</span><span style="color: #2face2">r</span>
         </a>
        </div> <!-- #logo -->
    </div>
    <div id="container">
        <div id="FunctionTitle">
        
            <h3 id="SelectedTitle">User Management</h3>
        
        </div>
        <div id="NewUser">
            <a id="AddUser" href="javascript:void(0)">
                <img src="/static/img/addUserIcon.png">
                Add User
            </a>
        </div>
        <div id="UserInfos">
        
        </div>
        <div class="ExitButtons">
            <a class="Exit" href="/accounts/logout">
                <img src="/static/img/ExitIcon.png">
            </a>
        </div>
        <div id="AddUserDialog" class="modal-dialog hide">
            <div class="modal-header">
                    <button type="button" class="btn-close close">&times;</button>
                    <h4 class="modal-title">Add User</h4>
            </div> <!-- .modal-header -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-4">
                        <label class="DialogSetTitle" for="Name">User Name</label>
                    </div> <!-- .col-sm-4 -->
                    <div class="col-sm-8">
                        <input id="Name" type="text" />
                    </div> <!-- .col-sm-8 -->
                </div> <!-- row -->
                <div class="row">
                    <div class="col-sm-4">
                        <label class="DialogSetTitle" for="Password">Password</label>
                    </div> <!-- .col-sm-4 -->
                    <div class="col-sm-8">
                        <input id="Password" type="password" />
                    </div> <!-- col-sm-8 -->
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <label class="DialogSetTitle" for="ConPassword">Confirm </label>
                    </div> <!-- .col-sm-4 -->
                    <div class="col-sm-8">
                        <input id="ConPassword" type="password" />
                    </div> <!-- .col-sm-8 -->
                </div> <!-- row -->
                <div class="row">
                    <div class="col-sm-4">  
                        <label class="DialogSetTitle" for="is-reviewer">Reviewer</label>
                    </div>
                    <div class="col-sm-8">
                        <div class="checkbox">
                        <input id="is-reviewer" type="checkbox" value="isreviewer" checked="checked" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-save btn-saveCode" id="SaveNewInfo">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- javascript -->
    <script type="text/javascript">
    function getUserDiv(username, isAdministrator, isReviewer){
        if (isAdministrator){
            return '<div class="UserInfo" id="'+ username + '">' +
                        '<div class="BasicInfo">' +
                            '<div class="UserName">' + 
                                '<label class="UserName">' + username +'</label>' + 
                            '</div>' +
                           ' <div class="ButtonArea">' +
                                '<a class="EditButton open" href="javascript:void(0)" onclick="showDetail(this)" id="'+ username + '">' +
                                    '<img src="/static/img/editIcon.png">' +
                                '</a>' +
                            '</div>' +
                        '</div>' +
                        '<div class="EditPassword hide" id="'+ username + 'Password">' +
                            '<label class="SetTitle">New Password</label>' +
                            '<input id="'+username+'NewCode" class="Set" type="password">' +
                            '<label class="SetTitle">Confirm Password</label>' +
                            '<input id="'+username+'ReCode" class="Set" type="password">' +
                            '<div class="saveArea" >' + 
                                '<a href="#" class="saveAction" id="'+ username + '" onclick="saveChange(this)">Save</a>' +
                            '</div>' +
                        '</div>' +
                    '</div>';
        }else{
            imageStr = '<div class="EditImages hide" id="'+ username + 'Images">' +
                            '<label class="SetTitle">Assign More Images</label>' +
                            '<input id="'+username+'ImageNumber" min=0 class="Set" type="number" >' +
                        '</div>'
            assginButtonStr = '';
            reviewerStr = '';
            if (isReviewer){
                assginButtonStr += '<a href="#" class="saveAction" id="'+username+'" '+
                                    'onclick="assignReviewerImages(this)">Assign Images</a>';
                reviewerStr += 'reviewer'
            }
            else{
                assginButtonStr += '<a href="#" class="saveAction" id="'+username+'" '+
                                    'onclick="assignImages(this)">Assign Images</a>'
            }
            return '<div class="UserInfo" id="'+ username + '">' +
                        '<div class="BasicInfo">' +
                            '<div class="UserName">' + 
                                '<label class="UserName '+reviewerStr+'">' + username +'</label>' + 
                            '</div>' +
                           ' <div class="ButtonArea">' +
                                '<a class="EditButton open" href="javascript:void(0)" onclick="showDetail(this)" id="'+ username + '">' +
                                    '<img src="/static/img/editIcon.png">' +
                                '</a>' +
                                '<a class="RemoveButton" href="javascript:void(0)" onclick="removeUser(this)" id="'+ username + '">' +
                                    '<img src="/static/img/removeIcon.png">' +
                                '</a>' +
                            '</div>' +
                        '</div>' +
                        '<div class="EditPassword hide" id="'+ username + 'Password">' +
                            '<label class="SetTitle">New Password</label>' +
                            '<input id="'+username+'NewCode" class="Set" type="password">' +
                            '<label class="SetTitle">Confirm Password</label>' +
                            '<input id="'+username+'ReCode" class="Set" type="password">' +
                        '</div>' + imageStr
                        +
                        '<div class="saveArea hide" id="'+username+'saveArea">' + 
                                '<a href="#" class="saveAction" id="'+ username + '" onclick="saveChange(this)">Save Password</a>' +
                                 assginButtonStr +
                            '</div>' +
                    '</div>';
            }
    }
    </script>
    <script type="text/javascript">
        function showNewUser(userInfo){
            $('#UserInfos').append(getUserDiv(userInfo['username'], userInfo['isAdministrator'], userInfo['isReviewer']));
        }
    </script>
    <script type="text/javascript">
        function presentUsers(result){
            var i = 0;
            while (result[i]){
                showNewUser(result[i]);
                i++;
            }
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var postData = "";
            $.ajax({
                type: 'POST',
                url: '/accounts/present',
                data: postData,
                dataType: 'JSON',
                success: function(result){
                    presentUsers(result);
                }
            });
        });
    </script>
    <script type="text/javascript">
    function showDetail(obj){
        if ($(obj).hasClass('open')){
            $(obj).removeClass('open');
            var imagesId = $(obj).attr('id') + "Images";
            var passwordId = $(obj).attr('id') + "Password";
            var saveID = $(obj).attr('id') + "saveArea";
            $('div#'+imagesId).removeClass('hide');
            $('div#'+passwordId).removeClass('hide');
            $('div#'+saveID).removeClass('hide');
        }else{
            $(obj).addClass('open');
            var imagesId = $(obj).attr('id') + "Images";
            var passwordId = $(obj).attr('id') + "Password";
            var saveID = $(obj).attr('id') + "saveArea";

            $('div#'+imagesId).addClass('hide');
            $('div#'+passwordId).addClass('hide');
            $('div#'+saveID).addClass('hide');
        }
    }
    </script>
    <script type="text/javascript">
    function assignImages(obj){
        var username = $(obj).attr('id');
        var imageCount = $('#'+username+'ImageNumber').val();

        if(0 == imageCount) {
            alert('At least one image.');

            return;
        }
        var postData = 'username=' + username + '&imageCount=' + imageCount;

        $.ajax({
            type: 'POST',
            url: '/accounts/assignImages',
            data: postData,
            dataType: 'JSON',
            success: function(result) {
                processAssignImages(result);
            }
        });
    }
    </script>
    <script type="text/javascript">
    function assignReviewerImages(obj) {
        var username   = $(obj).attr('id');
        var imageCount = $('#' + username + 'ImageNumber').val();
        if (0 == imageCount){
            alert('At least one image.');

            return;
        }
        var postData = 'username=' + username + '&imageCount=' + imageCount;

        $.ajax({
            type: 'POST',
            url: '/accounts/assignReviewerImages',
            data: postData,
            dataType: 'JSON',
            success: function(result){
                processAssignImages(result);
            }
        });
    }
    </script>
    <script type="text/javascript">
    function processAssignImages(result){
        if(!result['isSuccessful']){
            alert(result['errorMessage']);
        } else {
            alert("Images assigned successfully!");
        }
    }
    </script>
    <script type="text/javascript">
    function processSaveResult(result, username){
        if(result['isChanged']){
            alert('Password reset successfully!');
        }else{
            alert('Can not change password!');
        }
    }
    </script>
    <script type="text/javascript">
    function saveChange(obj){
        var username = $(obj).attr('id');
        var newPassword = $('#'+username+'NewCode').val();

        if(newPassword.length == 0) {
            alert('Password empty.');

            return;
        }
        if (newPassword != $('#'+username+'ReCode').val()){
            alert('Passowrd Not Matched!');
            return;
        }
        var postData = 'username=' + username + '&newPassword=' + newPassword;
        $.ajax({
            type: 'POST',
            url: '/accounts/save',
            data: postData,
            dataType: 'JSON',
            success: function(result) {
                processSaveResult(result, username);
            }
        });
    }
    </script>
    <script type="text/javascript">
        $('#AddUserDialog .btn-close').click(function(){
            $('#AddUserDialog').addClass('hide');
            $('#Name').val("");
            $('#Password').val("");
            $('#ConPassword').val("");
        });
    </script>
    <script type="text/javascript">
    $('#AddUser').click(
        function(){
            $('#AddUserDialog').removeClass('hide');
        }
        );
    </script>
    <script type="text/javascript">
    function processAddResult(result, userInfo, isReviewer){
        if (!result['isAccountValid']){
            alert("Account exists!");
        }else{
            $('div#UserInfos').append(getUserDiv(userInfo, false, (isReviewer==1)? true : false ));
            $('#AddUserDialog').addClass('hide');
        }
    }
    </script>
    <script type="text/javascript">
    $('#SaveNewInfo').click(
        function(){
            var username   =$('#Name').val();
            var password   = $('#Password').val();
            var isReviewer = ($('#is-reviewer').is(':checked')) ? 1 : 0;
            if (username.length == 0){
                alert("User Name can't be empty!");
                return;
            }
            if (username.length > 16){
                alert('User Name length must less than 16');
            } else if (0 == password.length) {
                alert("Password empty!");
            }
            if (password != $('#ConPassword').val()){
                alert("Password not match!");
                return;
            }
            var postData = 'username=' + username +'&password=' + password + '&isReviewer=' + isReviewer;
            $.ajax({
                type: 'POST',
                url: '/accounts/addUser',
                data: postData,
                dataType: 'JSON',
                success: function(result) {
                    processAddResult(result, username, isReviewer);
                }
            });
            $('#Name').val("");
            $('#Password').val("");
            $('#ConPassword').val("");
        }
    );
    </script>
    <script type="text/javascript">
    function processRemoveUserResult(result, username){
        if(result){
            $('div#'+username +'.UserInfo').remove();
        }else{
            alert('Fail to remove');
        }
    }
    </script>
    <script type="text/javascript">
    function removeUser(obj){
        if (confirm("Sure to delete this user?")){
            var postData='username=' + $(obj).attr('id');
            $.ajax({
                type: 'POST',
                url: '/accounts/removeUser',
                data: postData,
                dataType: 'JSON',
                success: function(result) {
                    processRemoveUserResult(result, $(obj).attr('id'));
                }
            });
        }else{
            return;
        }
    }
    </script>
</body>
</html>
